<template>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

                <button ref="collapseBtn"
                        type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <router-link class="navbar-brand" to="/"><img src="@/assets/logo.png" height="40px" width="40px"/>
                </router-link>
                <p class="navbar-text">
                    <router-link to="/">VUE MUSIC</router-link>
                </p>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li
                            v-for="(item,index) in navdata"
                            :class="[{active:activeIndex==index},{notShow:!item.show}]"
                            :key="index">
                        <router-link @click.native="handleClick(index)" :to="item.route">{{item.title}}</router-link>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="search">
                        <span aria-hidden="true"
                              class="iconfont icon-search"></span>
                        <span aria-hidden="true"
                              v-show="keywords!=''"
                              @click.stop="clearInput"
                              class="iconfont icon-baseline-close-px"></span>
                        <input type="text"
                               @blur="hideSearRes"
                               @focus="search"
                               v-model="keywords"
                               class="form-control"
                               placeholder="搜索内容"
                               @keyup.native.enter="handleKeyup">
                    </li>
                    <li class="searchResult" v-show="showSearRes">
                        <div style="margin: 0px" v-for="(item,index) in searchResult.order" :key="index">
                            <!--                            {{searchResult[item]}}-->
                            <div class="searchResLeft">
                                <span :class="['iconfont',searchIcon[item][0]]"></span>
                                <span>{{searchIcon[item][1]}}</span>
                            </div>
                            <ul class="searchResRight">
                                <li v-for="(i,index2) in searchResult[item]" :key="index2">
                                    <router-link to="/" :title="i.name">
                                        {{i.name}}<span v-if="i.artists">-{{i.artists[0].name}}</span>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!--大屏显示，小屏隐藏,根据scss媒体查询更改-->
                    <li>
                        <router-link to="/login">登录</router-link>
                    </li>
                    <li>
                        <router-link to="/signin">注册</router-link>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>


</template>

<script>
    import musicApi from "../request/musicApi";

    export default {
        name: "navBar",
        data() {
            return {
                keywords: '',
                navdata: [
                    {title: '音乐首页', route: '/', show: true},
                    {title: '热门', route: '/hot', show: true},
                    {title: 'JJ', route: '/jj', show: true},
                    {title: '搜索', route: '/search', show: false},
                    {title: '登录', route: '/login', show: false},
                    {title: '注册', route: '/signin', show: false}],
                activeIndex: 0,
                searchResult: '',
                showSearRes: false,
                searchIcon: {
                    songs: ['icon-music', '单曲'],
                    artists: ['icon-geshou', '歌手'],
                    albums: ['icon-album', '专辑'],
                    mvs: ['icon-shipin', '视频'],
                    playlists: ['icon-musiclist', '歌单']
                }
            }
        }, methods: {
            handleClick(i) {
                if (i < this.navdata.length - 3) {
                    this.activeIndex = i;
                } else {
                    this.activeIndex == '';
                }

                // return this.$route.path === i.route;
            },
            clearInput() {
                this.keywords = '';
            },
            hideSearRes() {
                this.showSearRes = false;
            },
            search() {
                if (this.keywords != '')
                    musicApi.getSearchAdvise({keywords: this.keywords})
                        .then(res => {
                            this.searchResult = res.data.result;
                            if (!res.data.result) {
                                this.showSearRes = false;
                                return;
                            }
                            this.showSearRes = true;
                            console.log(this.searchResult);
                        });
            }
        },
        watch: {
            $route(to, from) {
                //监听路由更改，更新navbar的active状态
                for (let i = 0; i < this.navdata.length; i++) {
                    if (to.path == this.navdata[i].route) {
                        this.activeIndex = i;
                        break;
                    }
                }
                //监听路由更改和navbar展开状态，toggle navbar
                let btn = this.$refs.collapseBtn;
                if (to.path == '/' && from.path == '/')
                    return;
                else if (btn.getAttribute('aria-expanded') == 'false')
                    return
                else
                    btn.click();
            },
            keywords(n, o) {
                console.log(n, o);
                musicApi.getSearchAdvise({keywords: n})
                    .then(res => {
                        this.searchResult = res.data.result;
                        if (!res.data.result) {
                            this.showSearRes = false;
                            return;
                        }
                        this.showSearRes = true;
                        console.log(this.searchResult.artists);
                    });
            }
        }, mounted() {
        }
    }
</script>

<style scoped lang="scss">
    .navbar-default {
        margin-bottom: 0px;
    }

    div.navbar-header {
        .navbar-brand {
            padding: 5px 0px 0px 5px;
        }

        .navbar-text {
            margin-left: 0px;

            a {
                color: inherit;
                text-decoration: inherit;
            }
        }
    }

    ul.navbar-left {
        li.notShow {
            display: block;
        }

        @media (min-width: 768px) {
            li.notShow {
                display: none;
            }
        }
    }

    ul.navbar-right {
        position: relative;

        .searchResult {
            position: absolute;
            top: 50px;
            z-index: 30;
            width: 260px;
            height: auto;
            border-radius: 6px;
            background: #fff;

            a {
                color: #000;
                font-size: 12px;
                text-decoration: none;
                display: inline-block;

            }

            .searchResLeft {
                text-align: center;
                margin: 0px;
                padding: 0px;
                float: left;
                width: 30%;
                height: auto;
                display: inline-block;
                /*&:after{*/
                /*    content: '1';*/
                /*    display: block;*/
                /*    clear: both;*/
                /*}*/
            }

            .searchResRight {
                margin: 0px;
                display: inline-block;
                border-left: 1px solid #E2E2E2;
                border-bottom: 1px solid #E2E2E2;
                padding: 0px 2px;
                width: 70%;
                height: auto;
                list-style: none;

                li {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 100%;
                    white-space: nowrap;
                    width: 100%;
                    cursor: pointer;
                    &:hover {
                        background: #8C8A8B;
                    }

                }
            }
        }

        li {
            display: none;
        }

        @media (min-width: 768px) {
            li {
                display: block;
            }
            li.search {

                padding-top: 10px;
                height: 100%;

                span.icon-search {
                    cursor: pointer;
                    position: absolute;
                    /*line-height: 50px;*/
                    left: 5px;
                    font-size: 20px;
                }

                span.icon-baseline-close-px {
                    cursor: pointer;
                    position: absolute;
                    right: 5px;
                    margin-top: 5px;
                    font-size: 16px;
                }

                input {
                    height: 100%;
                    padding-left: 30px;
                    padding-right: 22px;
                }
            }
        }

    }
</style>